import React, { Component } from 'react'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    console.log('1 constructor');
  }
  render() {
    console.log('2 render');
    // 不能使用setState()
    return (
      <>
        <div id='1'>{this.state.count}</div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
        {this.state.count > 3 ? null : <Child />}
      </>
    )
  }
  componentDidMount() {
    console.log('3 componentDidMount');
    // 发网络请求
    // 拿到真是DOM
  }
  componentDidUpdate() {
    // 不能直接调用setState会导致无限循环
    // 可以有条件的使用setState
    console.log('4 componentDidUpdate');
    // 也可以拿到DOM（是最新的）
    console.log('id', document.getElementById('1'));
  }

}
export class Child extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    console.log('子=>1 constructor');
    window.addEventListener('resize', this.handleRrsize)
  }
  handleRrsize = () => {
    console.log('resize....');
  }
  render() {
    console.log('子=>2 render');
    // 不能使用setState()
    return (
      <>
        <div id='1'>{this.state.count}</div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
      </>
    )
  }
  componentDidMount() {
    console.log('子=>3 componentDidMount');
    // 发网络请求
    // 拿到真是DOM
  }
  componentDidUpdate() {
    // 不能直接调用setState会导致无限循环
    // 可以有条件的使用setState
    console.log('子=>4 componentDidUpdate');
    // 也可以拿到DOM（是最新的）
    console.log('id', document.getElementById('1'));
  }
  componentWillUnmount() {
    console.log('子=>5 componentWillUnmount');
    window.removeEventListener('resize', this.handleRrsize)
  }

}

export default App